<template>
  <div class="page">
    <c-title :hide="false" text="健康小屋店"></c-title>
    <sjrz :name="'健康小屋'"></sjrz>
    <div class="top">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in pricList" :key="index"><img :src="item.thumb" /></van-swipe-item>
      </van-swipe>

      <div class="top_About">
        <div class="image">
          <img :src="address.store_thumb" />
        </div>
        <div class="top_r">
          <h3>{{ address.store_name }}</h3>
          <div class="top_b">
            <img src="../../assets/images/goods/pull_up@2x.png" class="img" />
            <div class="address">
              {{ address.store_address }}
            </div>
          </div>

        </div>

      </div>
      <div class="freel">
        <h3>{{ cate_name }}</h3>
        <van-row>
          <van-col span="12" class="Xm" v-for="(item, index) in title" :key="index">
            <p>{{ item.title }}</p>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="content">
      <!-- 慢病管理 -->
      <div class="content_man">
        <div class="pbold">
          <p>{{ manb }}</p>
        </div>
        <van-row>
          <div v-for="(item, index) in mbList" :key="index">
            <van-col span="6"><img :src="item.thumb" />
              <p @click="tiaozhuan(item.id)">{{ item.name }}</p>
            </van-col>
          </div>
        </van-row>
      </div>
      <!-- 健康理疗 -->
      <div class="content_ll">
        <div class="pbold">
          <p>{{ name }}</p>
        </div>
        <br />
        <div v-for="(item, index) in physicalList" :key="index" class="lanmu">
          <div class="imgclass"><img :src="item.thumb" /></div>

          <div class="shuju">
            <div class="keshi">{{ item.name }}
              <van-button type="primary" size="mini" color="#39a9ed" @click="llyy(item.id)">预约</van-button>
            </div>
            <div class="label" v-if="item.remark">
              {{ item.remark | ellipsis }}
              <div class="text" @click="show = true">查看更多</div>
            </div>
          </div>
          <van-popup v-model="show" round position="bottom" :style="{ height: '20%' }">{{ item.remark }}</van-popup>
        </div>
        <van-dialog v-model="llshow" confirm-button-text="确认" cancel-button-text="取消" show-cancel-button title="预约信息"
          :before-close="onclose">
          <van-form>
            <van-cell-group inset>
              <van-field v-model="form.date" is-link readonly label="预约时间" placeholder="请选择预约时间"
                @click="dateshow = true" />
            </van-cell-group>
          </van-form>
        </van-dialog>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_ts">
        <div class="pbold">
          <p>特色产品</p>
        </div>
        <van-row>
          <div v-for="(item, index) in tsList" :key="index" @click="cp(item.name,item.id)">
            <van-col span="6"><img :src="item.thumb" /><br />
              <p>{{ item.name }}</p>
            </van-col>
          </div>
        </van-row>
      </div>
      <div class="bottom_fw">
        <div class="pbold">
          <p>特色服务</p>
        </div>
        <van-row>
          <div v-for="(item, index) in tfList" :key="index" @click="fw(item.id)">
            <van-col span="6"><img :src="item.img" /><br />
              <p>{{ item.text }}</p>
            </van-col>
          </div>
        </van-row>
      </div>
    </div>
    <van-popup v-model="dateshow" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate"
        @confirm="onConfirm" @cancel="dateshow = false" />
    </van-popup>
  </div>
</template>
<script>
  import {
    Toast
  } from "vant";
  import sjrz from "components/sjrz";
  export default {
    components: {
      sjrz
    },
    data() {
      return {
        show: false,
        mbList: [], //慢病管理
        tsList: [], //特色产品
        zuixin: [], //免费体检
        name: null,
        manb: null,
        ts: null,
        tfList: [
          //特色服务
          {
            img: "https://files.catbox.moe/vqybim.jpg",
            id: "1",
            text: "爱心公益"
          },
          {
            img: "https://files.catbox.moe/78k300.jpg",
            id: "2",
            text: "健康讲座"
          },
          {
            img: "https://files.catbox.moe/db38iz.jpg",
            id: "3",
            text: "日间照料"
          },
          {
            img: "https://files.catbox.moe/i5lffi.jpg",
            id: "4",
            text: "社区文化站"
          }
        ],
        physicalList: [], //健康理疗
        title: [], //title
        pricList: [],
        address: {}, //地址
        llshow: false,
        dateshow: false,
        currentDate: new Date(),
        minDate: new Date(),
        llid: 0,
        cate_name: null,
        form: {
          technician_id: null, //技师id
          store_id: null, //门店id
          yuyue_time: null //时间
        }
      };
    },
    filters: {
      ellipsis(value) {
        if (!value) return "";
        if (value.length > 15) {
          return value.slice(0, 15) + "...";
        }
        return value;
      }
    },
    activated() {
      this.getList();
      this.glList(); //获取慢病管理
      this.getmd();
      this.getaddress();
    },
    methods: {
      tiaozhuan(id) {
        this.$router.push(this.fun.getUrl("goods", {
          id
        }));
      },
      sptz(act_id) {
        this.$router.push(this.fun.getUrl("wzxq", {}, {
          act_id
        }));
      },
      getmd() {
        $http
          .post("plugin.store-cashier.frontend.store.store-project.get_phy_goods", {
            store_id: 28
          })
          .then(response => {
            this.cate_name = response.data.cate_name;
            this.title = response.data.list;
          });
      },
      getaddress() {
        $http
          .post("plugin.store-cashier.frontend.store.get-store-info.get-stores-details", {
            store_id: 28
          })
          .then(response => {
            this.address = response.data.store_info;
          });
      },
      llyy(llid) {
        this.$router.push(this.fun.getUrl("yyxx", {}, {
          llid
        }));
        //项目预约
        // (this.llid = llid), (this.llshow = true);
      },
      onclose(action, done) {
        // 获取会员id
        if (action == "confirm") {
          if (this.form.date != null) {
            // 预约信息填充并发送请求
            $http
              .post("plugin.store-cashier.frontend.store.store-technician.add_yuyue", {
                store_id: 28,
                yuyue_time: this.form.date,
                project_id: this.llid
              })
              .then(response => {
                if (response.result == 1) {
                  Toast(response.msg);
                }
              });
            this.form = {};
            return done(true);
          } else {
            Toast("请输入完整信息");
            return done(false);
          }
        } else {
          this.form = {};
          return done();
        }
      },
      formatDate(datavalue) {
        return `${datavalue.getFullYear()}/${datavalue.getMonth() + 1}/${datavalue.getDate()}`;
      },
      onConfirm(datavalue) {
        this.dateshow = false;
        this.form.date = this.formatDate(datavalue);
      },
      glList() {
        // 慢病管理
        $http
          .post("plugin.store-cashier.frontend.store.store-project.get_manbing", {
            store_id: 28
          })
          .then(response => {
            this.manb = response.data.cate_name;

            this.mbList = response.data.list;
          });

        // 健康理疗
        $http
          .post("plugin.store-cashier.frontend.store.store-project.get_jiankang", {
            store_id: 28
          })
          .then(response => {
            this.name = response.data.cate_name;
            this.physicalList = response.data.list;
          });

        // 特色
        $http
          .post("plugin.store-cashier.frontend.store.store-project.get_teshe", {
            store_id: 28
          })
          .then(response => {
            this.tsList = response.data;
          });
      },
      getList() {
        $http
          .post("plugin.store-cashier.frontend.store.store-picture.get-list", {
            category_id: 2
          })
          .then(response => {
            this.pricList = response.json;
          });
      },
      fw(id) {
        if (id == 1) {
          this.$router.push(this.fun.getUrl("axgy", {}, {
            id
          }));
        } else if (id == 2) {
          this.$router.push(this.fun.getUrl("jkjz", {}, {
            id
          }));
        } else if (id == 3) {
          this.$router.push(this.fun.getUrl("rjzl", {}, {
            id
          }));
        } else {
          this.$router.push(this.fun.getUrl("sqzx", {}, {
            id
          }));
        }
      },
      cp(name, id) {
        let valueList = {
          name,
          id
        }

        if (name == "理疗项目") {
          this.$router.push(this.fun.getUrl("llxm", {}, {
            id
          }));
        } else {
          this.$router.push(this.fun.getUrl("tscp", {}, {
            valueList
          }));
        }
      }
    }
  };
</script>
<style scoped lang="scss">
  .my-swipe .van-swipe-item {
    img {
      height: 10rem;
      width: 100%;
    }
  }

  .top_About {
    display: flex;
    height: 5rem;
    border-radius: 1rem;
    background-color: #fff;
    margin: 1rem 0.5rem;
    padding: 0.5rem;

    .top_r {
      .top_b {
        img {
          margin-right: 0.5rem;
        }
      }

    }

    h3 {
      padding-bottom: 0.5rem;
    }

    img {
      width: 4rem;
      height: 4rem;
      border-radius: 4rem;
      float: left;
      line-height: 5rem;
    }

    .img {
      width: 1.5rem;
      height: 1.5rem;
      margin: 6% 0% 1% 10%;
    }

    img:first-child {
      margin: 3% 0% 3% 5%;
    }
  }

  .address {
    font-size: 0.8rem;
    text-align: left;
  }

  .content {
    .content_man {
      background-color: #fff;
      margin-bottom: 1rem;

      img {
        width: 4rem;
        height: 4rem;
        border-radius: 4rem;
        margin: 0.5rem 0.5rem 0.3rem 1rem;
      }

      p:last-child {
        text-align: center;
        margin-bottom: 0.3rem;
      }
    }

    .content_ll {
      background-color: #fff;
      margin-bottom: 1rem;

      .lanmu {
        display: flex;

        .imgclass {
          display: flex;
          margin-right: 1rem;

          img {
            height: 4rem;
            display: flex;
            justify-content: left;
            margin-left: 3%;
            margin-bottom: 1rem;
          }
        }

        .keshi {
          display: flex;
          // bottom: 4rem;
          justify-content: space-between;

          .van-button--primary {
            color: #fff;
            // margin-left: 11rem;
          }
        }

        .shuju {
          width: 100%;

          .label {
            display: flex;
            justify-content: space-between;
            margin: 1rem 0;

            .text {
              color: #39a9ed;
            }
          }
        }

        .textclass {
          display: flex;
          justify-content: right;
        }
      }
    }
  }

  .bottom .bottom_ts {
    background-color: #fff;
    margin-bottom: 1rem;

    img {
      width: 4rem;
      height: 4rem;
      margin: 0.5rem 0.5rem 0.3rem 1rem;
      border-radius: 80%;
    }

    p:not(:first-child) {
      text-align: center;
      margin-bottom: 0.3rem;
    }
  }

  .bottom .bottom_fw {
    background-color: #fff;

    img {
      width: 4rem;
      height: 4rem;
      margin: 0.5rem 0.5rem 0.3rem 1rem;
      border-radius: 80%;
    }

    p:not(:first-child) {
      text-align: center;
      margin-bottom: 0.3rem;
    }
  }

  .pbold {
    display: flex;
    justify-content: space-between;
    margin-left: 1.1rem;
    font-weight: bold;
  }

  .freel {
    border-radius: 1rem;
    background-color: #fff;
    margin: 1rem 0.5rem;
    font-weight: bold;
    height: 5rem;

    p {
      text-align: center;
      border-radius: 1rem;
      height: 3rem;
      line-height: 3rem;
      width: 9rem;
      background-color: #67c23a61;
      margin: 0.4rem 1rem;
      font-weight: 400;
    }
  }
</style>
